SideButton Marketing Website Features — Workflow Engine — Knowledge Module Reference

What This Is

Feature page for the SideButton Workflow Engine — YAML-defined automation workflows with browser actions, AI steps, control flow, and data handling. Uses the shared FeatureHero component with "Workflow Engine" badge (primary/teal color). Includes: custom 4-category building blocks grid (Browser Actions 6 items, AI Steps 4 items, Control Flow 4 items, Data Handling 4 items — each in a white card with colored icon header), a YAML code example section with dark panel and copy button, a Growing Workflow Library section with screenshot and dynamically-generated platform cards from marketplace data, Related Features 3-card grid, and dark FeatureCTA. Has BreadcrumbList and HowTo JSON-LD schemas. This is the only feature page with client-side JavaScript for the copy button.

URL Patterns

Pattern	Description
/features/workflow-engine	Workflow engine feature page

Page Structure

+--[Header: sticky banner]---------------------------+
|                                                     |
| [1. HERO — FeatureHero component]                   |
|   Badge: "Workflow Engine" (teal/primary)            |
|   H1: "SideButton Workflows"                        |
|   Subtitle + 2 CTA buttons                          |
|   "Get Started Free" -> docs install                |
|   "Documentation" -> docs home                      |
|                                                     |
| [2. BUILDING BLOCKS — custom grid, bg-slate-50]     |
|   "What You Can Build" heading                      |
|   2×2 grid (md:grid-cols-2) of white cards          |
|                                                     |
|   Browser Actions (blue icon, 6 items):             |
|     navigate(url), click(selector), type(selector,  |
|     text), extract(selector), scroll(direction),    |
|     wait(condition)                                  |
|                                                     |
|   AI Steps (purple icon, 4 items):                  |
|     generate(prompt), classify(text),               |
|     summarize(content), extract_entities(text)       |
|                                                     |
|   Control Flow (orange icon, 4 items):              |
|     if/else, for loops, retry, error handling        |
|                                                     |
|   Data Handling (green icon, 4 items):              |
|     Variables, JSON output, CSV export, Templates    |
|                                                     |
| [3. EXAMPLE WORKFLOW — white background]             |
|   "Example Workflow" heading                        |
|   Dark panel (bg-slate-900) with:                   |
|     filename "draft-reply.yaml" (mono text)         |
|     Copy button (#copy-workflow-btn)                |
|     YAML code block in <pre><code>                  |
|                                                     |
| [4. WORKFLOW LIBRARY — bg-slate-50]                  |
|   "Growing Workflow Library" heading                |
|   Library screenshot /screenshots/library.png       |
|   6 platform cards (dynamic from marketplace):      |
|     grid-cols-2 md:grid-cols-3 lg:grid-cols-6      |
|     Each: logo/initial + name + workflow count      |
|   "Browse All Workflows" link button -> /integrations|
|                                                     |
| [5. RELATED FEATURES — bg-slate-50, 3-card grid]    |
|   AI Automation | Embed Buttons | Integrations       |
|                                                     |
| [6. CTA — FeatureCTA component, bg-slate-900]       |
|   "Start Building Workflows"                        |
|   "Get Started Free" + "View Documentation"         |
|                                                     |
+--[Footer: 6-column grid]---------------------------+

Key Elements

Hero Section (FeatureHero component)

Element	Selector	Notes
Hero section	section.relative.overflow-hidden (first)	Shared FeatureHero
Badge	.inline-flex.rounded-full with "Workflow Engine"	Teal: bg-primary/10 text-primary border-primary/20
Badge dot	span.w-1\\.5.h-1\\.5.rounded-full.animate-pulse	Pulsing teal dot
Hero heading	h1 "SideButton Workflows"	text-4xl md:text-5xl lg:text-6xl
Hero subtitle	p "AI workflow automation with YAML..."	text-lg md:text-xl
Get Started Free	a[href*="docs.sidebutton.com/installation"]	bg-primary button
Documentation	a[href*="docs.sidebutton.com"] (outline)	bg-white border button

Building Blocks Section

Element	Selector	Notes
Section	section.py-16.bg-slate-50 (first)	Slate background
Section heading	h2 "What You Can Build"	text-2xl md:text-3xl
Subtitle	p "Combine these building blocks to automate anything"	text-slate-600
Grid	.grid.md\\:grid-cols-2.gap-8	2-column layout, 8px gap
Browser Actions card	.bg-white.rounded-xl.border.border-slate-200.p-6 (first)	Blue header icon (bg-blue-100, text-blue-600, globe SVG)
Browser Actions heading	h3 "Browser Actions"	font-bold, flex with icon
Browser Actions items	code elements in .space-y-3	navigate(url), click(selector), type(selector, text), extract(selector), scroll(direction), wait(condition)
AI Steps card	Second .bg-white.rounded-xl card	Purple header icon (bg-purple-100, text-purple-600, sparkles SVG)
AI Steps heading	h3 "AI Steps"	font-bold
AI Steps items	code elements	generate(prompt), classify(text), summarize(content), extract_entities(text)
Control Flow card	Third card	Orange header icon (bg-orange-100, text-orange-600, arrows SVG)
Control Flow heading	h3 "Control Flow"	font-bold
Control Flow items	code elements	if/else, for loops, retry, error handling
Data Handling card	Fourth card	Green header icon (bg-green-100, text-green-600, database SVG)
Data Handling heading	h3 "Data Handling"	font-bold
Data Handling items	code elements	Variables, JSON output, CSV export, Templates
Item code style	code.text-xs.bg-slate-100.px-2.py-1.rounded.font-mono.text-slate-700	Inline code pill
Item description	span.text-sm.text-slate-500	Description text next to code

Example Workflow Section

Element	Selector	Notes
Section	section.py-16 (Example Workflow)	White background
Section heading	h2 "Example Workflow"	text-2xl md:text-3xl
Subtitle	p "A simple YAML workflow that drafts an email reply using AI"	text-slate-600
Code panel	.bg-slate-900.rounded-2xl.overflow-hidden	Dark code container
Filename bar	.flex.items-center.justify-between.px-4.py-3.border-b.border-slate-700	Contains filename + copy button
Filename	span.font-mono.text-sm.text-slate-400	"draft-reply.yaml"
Copy button	#copy-workflow-btn	border border-slate-700, text-xs, hover:text-primary hover:border-primary
Code content	pre.p-6.text-sm.text-slate-300 > code	YAML: name, description, steps (extract, generate, type)

Workflow Library Section

Element	Selector	Notes
Section	section.py-16.bg-slate-50 (Library)	Slate background
Section heading	h2 "Growing Workflow Library"	text-2xl md:text-3xl
Subtitle	p "Ready-to-use automations for popular platforms..."	text-slate-600
Library screenshot	img[alt*="SideButton local workflow library"]	/screenshots/library.png, 1280x800, lazy, rounded-xl shadow-2xl
Platform grid	.grid.grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-6.gap-4	Responsive: 2/3/6 columns
Platform card	a[href^="/integrations/"] in grid	White card, logo/initial + name + "{count} workflows"
Platform logo	img.w-10.h-10.rounded-lg.object-contain	Loaded from platform.logoUrl if available
Platform initial	.w-10.h-10.rounded-lg with background-color	Fallback: first letter of name on colored background
Platform name	p.font-medium.text-slate-900.text-sm	Platform display name
Platform count	p.text-xs.text-slate-500	"{count} workflows" — dynamically computed
Browse All link	a "Browse All Workflows"	inline-flex with arrow icon, links to /integrations

Related Features

Element	Selector	Notes
Section	section.py-12.bg-slate-50	Continuous with Library section background
Section heading	h2 "Related Features"	text-xl
AI Automation card	a[href="/features/ai-automation"]	h3 "AI Automation", hover:border-primary
Embed Buttons card	a[href="/features/embed-buttons"]	h3 "Embed SideButton Buttons"
Integrations card	a[href="/integrations"]	h3 "Integrations"

CTA Section (FeatureCTA component)

Element	Selector	Notes
CTA container	.bg-slate-900.rounded-2xl	Dark background
Section heading	h2 "Start Building Workflows"	text-white
Subtitle	p "Create your first automation in minutes..."	text-slate-300
Get Started Free	a[href*="docs.sidebutton.com/installation"]	bg-primary button
View Documentation	a[href*="docs.sidebutton.com/workflows"]	bg-white/10 button, links to docs/workflows

Data Model

Static feature page with some dynamic data from marketplace module. Content rendered at build time.

Field	Type	Description
browserActions	array[6]	Step definitions: icon, title (function signature), description
aiSteps	array[4]	AI step definitions: icon, title, description
controlFlow	array[4]	Control flow definitions: icon, title, description
dataHandling	array[4]	Data handling definitions: icon, title, description
exampleWorkflow	string	YAML template: "Draft Gmail Reply" with extract, generate, type steps
platforms	array[6]	Dynamic: first 6 platforms from getPlatforms() (excluding 'multi'), with workflow counts from getWorkflowsByPlatform()
Related features	array[3]	AI Automation (/features/ai-automation), Embed Buttons (/features/embed-buttons), Integrations (/integrations)
SEO schemas	array[2]	BreadcrumbList (Home > Features > SideButton Workflows), HowTo (3-step: define YAML, add AI steps, run/trigger)

States & Variations

State	Trigger	Visual Indicator
Default	Page load	All sections visible, code block shown, copy button ready
Code copied	Click #copy-workflow-btn	Button text changes to "Copied!", adds text-primary + border-primary classes
Code copy reset	2000ms after copy	Button text reverts to "Copy", removes primary classes
Cookie dialog	First visit	Cookie Notice dialog overlay
SideButton FAB	Extension installed	Green "S" + "Click" button bottom-right
Hero badge pulse	Continuous	Teal dot pulses via animate-pulse
Building block card hover	Hover on category card	Default border-slate-200, no explicit hover effect (static cards)
Platform card hover	Hover on platform link	border -> border-primary + shadow-md
Related card hover	Hover on card	border-primary + shadow-md, h3 text primary
Browse All hover	Hover on link	border -> border-primary, text -> text-primary
Responsive mobile (<= 768px)	Small viewport	Building blocks 1 column, platform grid 2 columns, CTA buttons stack
Responsive tablet (768-1024px)	Medium viewport	Building blocks 2 columns, platform grid 3 columns
Responsive desktop (>= 1024px)	Large viewport	Platform grid 6 columns
Screenshot lazy load	Scroll to library section	Library image loads when entering viewport
Dynamic platform data	Build time	Platform cards and workflow counts come from marketplace.ts module at build time

Common Tasks

Verify Page Loads Correctly

1. Navigate to /features/workflow-engine
2. Verify hero heading "SideButton Workflows" is visible
3. Verify "Workflow Engine" badge with pulsing teal dot
4. Scroll through all 6 sections and verify none are missing
5. Check that library screenshot loads properly

Verify Building Blocks Grid

1. Scroll to "What You Can Build" section
2. Verify 4 category cards in 2x2 grid layout
3. Verify Browser Actions card: blue icon header, 6 code items (navigate, click, type, extract, scroll, wait)
4. Verify AI Steps card: purple icon header, 4 items (generate, classify, summarize, extract_entities)
5. Verify Control Flow card: orange icon header, 4 items (if/else, for loops, retry, error handling)
6. Verify Data Handling card: green icon header, 4 items (Variables, JSON output, CSV export, Templates)
7. Verify each item has monospace code pill + description text

Test YAML Copy Button

1. Scroll to "Example Workflow" section
2. Verify dark code panel shows "draft-reply.yaml" filename
3. Verify YAML content is visible in pre/code block
4. Click #copy-workflow-btn ("Copy")
5. Verify button text changes to "Copied!" with primary color styling
6. Wait 2000ms and verify button reverts to "Copy" with default styling
7. Verify clipboard contains the complete YAML workflow string

Verify Platform Cards

1. Scroll to "Growing Workflow Library" section
2. Verify library screenshot image loads
3. Count platform cards (should be 6, from marketplace data)
4. Verify each card has: logo or initial letter, platform name, workflow count
5. Click a platform card and verify it navigates to /integrations/{slug}
6. Click "Browse All Workflows" and verify navigation to /integrations

Verify All Links Work

1. Check hero "Get Started Free" -> docs.sidebutton.com/installation
2. Check hero "Documentation" -> docs.sidebutton.com
3. Check platform cards -> /integrations/{slug} for each
4. Check "Browse All Workflows" -> /integrations
5. Check Related Features: /features/ai-automation, /features/embed-buttons, /integrations
6. Check CTA "Get Started Free" -> docs install
7. Check CTA "View Documentation" -> docs.sidebutton.com/workflows

Verify Responsive Layout

1. Set viewport to 375px (mobile)
2. Verify building blocks grid collapses to single column
3. Verify platform grid becomes 2 columns
4. Set viewport to 768px (tablet) and verify building blocks 2-column, platforms 3-column
5. Set viewport to 1280px+ and verify platforms expand to 6-column row

Tips

• Building block items use code elements for function names, styled as slate-100 pills with monospace font — these are not interactive, just styled inline code
• Each category card has a unique color scheme: blue (Browser Actions), purple (AI Steps), orange (Control Flow), green (Data Handling) — icon background and icon color match
• The example YAML includes 3 workflow steps: extract (CSS selector), generate (AI prompt with template variable), type (fill input with AI output) — this is a real workflow pattern
• Platform cards are dynamically generated from getPlatforms() in ../../lib/marketplace — the first 6 non-multi platforms are shown with their actual workflow counts
• Platform logo fallback: if platform.logoUrl is null, a colored square with the first letter of the platform name is shown
• The copy button uses navigator.clipboard.writeText with the full workflow YAML string duplicated in the inline script
• The CTA "View Documentation" links specifically to docs.sidebutton.com/workflows (not just docs root)
• Three bg-slate-50 sections run consecutively (Library, Related Features) creating a continuous slate background area

Gotchas

• Platform data is build-time dynamic: The platform cards and workflow counts are computed at build time from the marketplace module — they reflect the state of the data when the site was built, not live data
• Copy button script is inline: The copy button JavaScript is in a <script> tag at the bottom of the page (not a component) — it uses document.getElementById('copy-workflow-btn') which only works after DOM load
• YAML content duplicated: The workflow YAML exists in two places: the frontmatter exampleWorkflow variable (rendered in the template) and the inline script string (used for clipboard copy) — these must stay in sync manually
• Library screenshot is lazy-loaded: /screenshots/library.png uses loading="lazy" — may not be visible immediately when scrolling to the section
• Platform grid responsive breakpoints: The grid uses three breakpoints (grid-cols-2 / md:grid-cols-3 / lg:grid-cols-6) — at exactly 768px the jump from 2 to 3 columns can cause layout shifts
• Building block cards have no hover effect: Unlike platform cards and related feature cards, the 4 category cards in the building blocks section have no explicit hover state — they are static display cards